<template>
  <a-modal
    title="查看数据"
    width="900px"
    :visible="visible"
    centered
    @cancel="handleCancel"
  >
    <s-table
      bordered
      ref="table"
      :columns="columns"
      :data="loadData"
      :scroll="scroll"
      size="small"
    >
    </s-table>

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { baseDataTableList } from '@/api/modular/main/tsdatarecord/baseDataTable'
import { metadataPage } from '@/api/modular/main/tsdatarecord/timeSpaceDataRecordManage'
import _ from 'lodash'
export default {
  name: 'detailTable',
  components: {
    STable
  },
  data() {
    return {
      visible: false,
      columns: [],
      scroll: {
        x: 1500,
        y: 400
      },
      loadData: parameter => {
        return metadataPage(_.assign(parameter, { recordId: this.record.id })).then(res => {
          if (res.success) {
            for (let i = 0; i < res.data.rows.length; i++) {
              res.data.rows[i] = JSON.parse(res.data.rows[i].content)
              res.data.rows[i].key = i + 1 + (parameter.pageNo - 1) * parameter.pageSize
            }
          }
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      record: {}
    }
  },
  methods: {
    init(record) {
      this.record = record
      this.loadColumns()
      this.visible = true
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
      })
    },
    loadColumns() {
      baseDataTableList({ recordId: this.record.id }).then(res => {
        if (res.success) {
          this.columns = []
          this.columns.push({
            title: '序号',
            width: 50,
            fixed: 'left',
            dataIndex: 'key'
          })
          res.data.forEach(col => {
            col.ellipsis = true
            if (col.title !== 'the_geom') {
              this.columns.push(col)
            }
          })
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  }
}
</script>

<style scoped>
</style>
